<template>
  <view class="content">
    <view
      class="nav-bar"
      :style="{
        paddingTop: $util.getStatusBarHeight(),
      }"
    >
      <text class="iconfont icon-left" @click="$util.goUrl(0)" /><text @click="showActionSheet"
        >{{ types[searchType] }}<text class="iconfont icon-xia"
      /></text>
      <text class="iconfont icon-plus" @click="$util.goUrl('/pagesPatient/record/index?add=1')" />
    </view>
    <scroll-list ref="scrollList" :scrollFlag="false" :slotData="{ activeIndex }" @getData="getData">
      <template v-slot="{ item, index, slotData }">
        <view class="item">
          <view @click="goUrl('/pagesPatient/equipmentList', item)" :class="['equipment', item.isBind ? 'avtive' : '']"
            >{{ item.isBind ? "已" : "未" }}绑定 <text class="iconfont icon-right"
          /></view>
          <view class="user-info">
            <view class="avatar">
              <image v-if="item.sex" src="@/static/image/man.png" />
              <image v-else src="@/static/image/woman.png" />
            </view>
            <text
              :class="['iconfont', item.sex ? 'icon-nan' : 'icon-nv', 'gender']"
              :style="{ background: item.sex ? '#1DA1F3' : '#F86098' }"
            />
            <view class="msg">
              <view class="msg-item">
				<text class="name" v-if="item.name">{{ item.name }}</text>
				<text class="name my-disabled" v-else>未完成信息设置</text>
				{{ item.age?item.age+'岁':'' }}
			  </view>
              <view class="msg-item">
                <text>{{ item.diseaseCategory }}</text
                >{{ item.sickTime }}</view
              >
              <view class="last-item">
                <uni-icons
                  @click="doctorFollowPatient(item, index)"
                  :color="
                    (item.isFollow && slotData.activeIndex != index) ||
                    (!item.isFollow && slotData.activeIndex == index)
                      ? '#ffca3e'
                      : '#ececec'
                  "
                  :size="30"
                  :type="
                    (item.isFollow && slotData.activeIndex != index) ||
                    (!item.isFollow && slotData.activeIndex == index)
                      ? 'star-filled'
                      : 'star'
                  "
                />
				<text class="iconfont icon-dianhua" @click="call(item.telphone)"/>
              </view>
            </view>
          </view>
          <view class="address">{{ item.provinceName + item.cityName + item.areaName + item.address }}</view>
          <view class="btns">
            <!-- <text @click="goDetails(item)">患者档案</text> -->
            <text @click="goUrl('/pagesPatient/record', item)" class="iconfont icon-gerendangan" />
            <text @click="goUrl('/pagesPatient/metricalData', item)" class="iconfont icon-shujukanban" />
            <text @click="$util.goUrl(`/pagesPatient/tips/index?isDoctor=1&patientId=` + item.patientId)">
              <text class="iconfont icon-renwu" /><text
                v-if="item.isNeedCare"
                style="margin-left: -16rpx"
                class="status"
                >关</text
              >
            </text>
            <text @click="goChangeDoctor(item)">
              <text class="iconfont icon-gaishan" /><text
                v-if="item.changeState > -1"
                class="status"
                :style="{ background: item.changeState ? '#e83112' : '' }"
                >{{ item.changeState ? "拒" : "审" }}</text
              >
            </text>
            <!-- <tui-button plain shape="circle" width="180rpx" height="60rpx" @click="patientData(item)">
              患者数据
            </tui-button>
            <tui-button shape="circle" width="180rpx" height="60rpx" style="margin-left: 40rpx">治疗历史</tui-button> -->
          </view>
        </view>
      </template>
    </scroll-list>
  </view>
</template>

<script>
import scrollList from "@/components/scroll-list/scroll-list.vue";
export default {
  components: { scrollList },
  props: {
    toTop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      token: uni.getStorageSync("token"),
      current: 0,
      initFlag: false,
      activeIndex: -1, //点击星星的下标
      searchType: 0,
      types: ["所有患者", "已测量", "未测量", "今日异常", "潜在流失"],
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad(options) {
    if (options.type) {
      this.searchType = options.type;
    }
    this.$nextTick(() => {
      this.$refs.scrollList.getData(1);
    });
  },
  onShow() {
    if (uni.getStorageSync("refreshMyPatient")) {
      uni.removeStorageSync("refreshMyPatient");
      this.$refs.scrollList.getData(2);
    }
  },
  onPullDownRefresh() {
    this.$refs.scrollList.getData(2);
  },
  onReachBottom() {
    this.$refs.scrollList.getData(3);
  },
  methods: {
    init() {
      if (this.initFlag) {
        return;
      }
      this.initFlag = true;
      this.$refs.scrollList.getData(1);
    },
    showActionSheet(item, index) {
      uni.showActionSheet({
        itemList: this.types,
        success: (res) => {
          if (this.searchType != res.tapIndex) {
            this.searchType = res.tapIndex;
            this.$refs.scrollList.getData(2);
          }
        },
      });
    },
    getData(param) {
      this.$api
        .doctorMyPatientList({ pageSize: 20, pageNum: param.pageNo, searchType: Number(this.searchType) })
        .then((res) => {
          if (res.code == 200) {
            this.activeIndex = -1;
            this.$refs.scrollList.setData(res.rows, param.pageNo * 20 >= res.total);
          } else {
            this.$refs.scrollList.setData(false, false);
          }
        });
    },
    //关注/取关
    doctorFollowPatient(item, index) {
      this.$api.doctorFollowPatient({ patientId: item.patientId }).then((res) => {
        if (res.code == 200) {
          this.activeIndex = index;
          this.$util.showSuccessToast(item.isFollow ? "已取关" : "已关注");
          setTimeout(() => {
            this.$refs.scrollList.getData(2);
          }, 1500);
        }
      });
    },
    goUrl(url, item) {
      this.$util.goUrl(`${url}/index?patientId=` + item.patientId);
    },
    goCare(item) {
      let url = `/pagesDoctor/care/index?patientId=` + item.patientId;
      if (item.isNeedCare) {
        url = url + "&isNeedCare=1";
      }
      this.$util.goUrl(url);
    },
    goChangeDoctor(item) {
      let url = "/pagesDoctor/changeDoctor/index?patientId=" + item.patientId;
      if (item.changeState < 0) {
        this.$util.goUrl(url);
      } else if (item.changeState == 0) {
        this.$util.showToast("请等待审核完成");
      } else if (item.changeState == 2) {
        url += `&details=1`;
        this.$util.goUrl(url);
      }
    },
    call(phone) {
      if (phone) {
        uni.makePhoneCall({
          phoneNumber: phone,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: $back-grey-color;
  .nav-bar {
    height: 70rpx;
    line-height: 70rpx;
    background: $theme-color;
    color: #fff;
    padding-bottom: 12rpx;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    .icon-left {
      padding: 0 30rpx;
      margin-right: 100rpx;
    }
    .icon-xia {
      margin-left: 10rpx;
    }
    .icon-plus {
      margin-left: 100rpx;
      font-size: 60rpx;
    }
  }
}
.item {
  background: #ffffff;
  width: 710rpx;
  margin: 28rpx 0 0 20rpx;
  box-sizing: border-box;
  border-radius: $default-border-radius;
  border: 1rpx solid $theme-color;
  position: relative;
  .equipment {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    color: $font-grey-color;
    font-size: $small-font-size;
  }
  .avtive {
    color: $theme-color;
  }
  .user-info {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx 0 20rpx;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 140rpx;
      overflow: hidden;
      box-shadow: rgba(14, 14, 14, 0.5) 0px 6rpx 15rpx 0px;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      padding: 4rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .gender {
      z-index: 100;
      font-size: 30rpx;
      margin: 100rpx 0 0 -60rpx;
      z-index: 100;
      background: blue;
      color: #fff;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 40rpx;
      border-radius: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.8);
    }
    .msg {
      margin-left: 40rpx;
      line-height: 50rpx;
      &-item {
        text:first-child {
          margin-right: 40rpx;
        }
        .name {
          font-weight: bold;
          font-size: $big-font-size;
        }
      }
      &-item:last-child {
        color: $font-grey-color;
        font-size: $small-font-size;
      }
      .last-item {
        margin: 10rpx 0 0 -10rpx;
        display: flex;
        min-width: 416rpx;
        align-items: center;
        color: $font-grey-color;
		text{
			margin-left: 40rpx;
			font-size: $huge-font-size;
		}
      }
    }
  }
  .address {
    color: $font-grey-color;
    font-size: $small-font-size;
    padding: 10rpx 20rpx 0 20rpx;
  }
  .btns {
    padding: 20rpx 0;
    margin-top: 20rpx;
    display: flex;
    box-sizing: border-box;
    // justify-content: flex-end;
    justify-content: space-around;
    align-items: center;
    border-top: 1rpx solid $default-border-color;
    // color: $theme-color;
    color: $font-grey-color;
    text {
      font-size: $huge-font-size;
      position: relative;
    }
    .status {
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      color: #fff;
      background: $theme-color;
      border-radius: 40rpx;
      font-size: 20rpx;
      margin: 0rpx 0 0 -10rpx;
      z-index: 100;
      text-align: center;
      line-height: 30rpx;
    }
  }
}
</style>
